<template>
  <div id="nav">
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      router
      @select="handleSelect"
    >
      <el-menu-item index="/login" :disabled="isLogin">Sign in</el-menu-item>
      <el-menu-item index="/course" :disabled="!isLogin">课程</el-menu-item>
      <el-menu-item index="/work" :disabled="!isLogin">作业</el-menu-item>
      <el-menu-item index="/user" :disabled="!isLogin">个人</el-menu-item>
      <el-menu-item index="/live" :disabled="!isLogin">直播</el-menu-item>
      
      
    </el-menu>
    <div class="nav-info">
      <div class="nav-user-info" >
        <img :src="userInfo.avaterURl" alt="" v-show="isLogin" draggable="false">
        {{userInfo.name}}
      </div>
      <div>
        <img :src="logoUrl" class="logo" draggable="false">
      </div>
    </div>
  </div>
</template>

<script>
import { Storage } from "@/storage";
import Bus from '../utils/bus';

export default {
  data() {
    return {
      // activeindex: '/login',
      logoUrl: require("../../public/img/logo1.png"),
      userInfo: {
        name:"",
        avaterURl: ""
      },
      isLogin: false,
    };
  },
  methods: {
      handleSelect(key, keyPath) {
        this.checkLoginStatus();
      },
      checkLoginStatus() {
        let token = Storage.get("nothing-token")
        let storage_stuInfo = Storage.get("stu")
        if(token == undefined || token == null || token == '') {
          this.$message({
                        showClose: true,
                        message: '当前登录状态已过期，请重新登录',
                        type: 'error'
          });
          
          this.userInfo.avaterURl = ''
          this.userInfo.name = ''
          this.isLogin = false
          this.$router.push({path:"/login"})
        }else {
          this.userInfo.avaterURl = storage_stuInfo.stuAvatar
          this.userInfo.name = storage_stuInfo.stuName
          this.isLogin = true
        }
      }
  },
  mounted() {
    this.checkLoginStatus()
    Bus.$on("isLogin", (val) => {
      this.isLogin = val
      let storage_stuInfo = Storage.get("stu")
      this.userInfo.avaterURl = storage_stuInfo.stuAvatar
      this.userInfo.name = storage_stuInfo.stuName
    })
  }
};
</script>

<style>
#nav{
  width: 100%;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  /* 固定导航栏 */
  position: fixed;
  /* 离用户最近 */
  z-index: 100;
  top: 0%;
}

/* 原来的看着过于拥挤，这里改一下 */
.el-menu{
  padding: 0 40px !important;

}

.el-menu-item {
  padding: 0 40px !important;
}

.nav-info {
  position: absolute;
  right: 1%;
  top: 20%;
  display: flex;
  justify-content: space-between;

  width: 250px;
}

.nav-user-info {
  font-size: 15px;
  height: 36px;
  /* width: 45px; */
  position: relative;
  /* right: 15%; */
  top: 20%;

  text-align: center;
  /* line-height: 35px; */
  display: flex;
  align-items: center;
  /* background-color: black; */
}

.nav-user-info > img {
  margin-right: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;

}

.logo {
    height: 35px;
    width: 100px;
    position: relative; 
    right: 0%;
    /* top: 20%; */
}
</style>